<template>
    <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="0">
            <router-link to="/home/indexx">
                <i class="el-icon-s-home">
                    <span>首页</span>
                </i>
            </router-link>
        </el-menu-item>



        <el-submenu :index="item.name" v-for="item in menulist" :key="item.name">
            <template slot="title">
                <i :class="item.icon">
                    <span>{{item.title}}</span>
                </i>
            </template>
           
            <el-menu-item :index="item2.name" v-for="item2 in item.children" :key="item2.name">
                <router-link :to="item2.path">
                    <i :class="item2.icon">
                        <span>{{item2.title}}</span>
                    </i>
                </router-link>

            </el-menu-item>

        </el-submenu>
       
    </el-menu>
</template>

<script>
export default {
    data() {
        return {
            menulist: [
                {
                    name: "sysmanga",
                    title: "系统管理",
                    icon: "el-icon-s-operation",
                    path: "",
                    children: [
                        {
                            name: "user",
                            title: "用户管理",
                            icon: "el-icon-user-solid",
                            path: "/home/user"
                        },
                        {
                            name: "role",
                            title: "人员管理",
                            icon: "eel-icon-circle-plus",
                            path: "/home/role"
                        },
                        {
                            name: "meun",
                            title: "菜单管理",
                            icon: "el-icon-tickets",
                            path: "/home/meun"
                        },
                    ]
                },
               
            ]
        }

    },
    created() {

    },
    mounted() {

    },
}
</script>
<style scoped>
.el-container {
    margin: 0;
    padding: 0;
    height: 100%;
}

.el-menu a {
    color: #ffd04b;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    /* text-align: center; */
    line-height: 200px;
}

.el-menu-vertical-demo {
    height: 100%;
}
</style>